<template>
	<view class="container padding">
		<view class="balance">
			<view class="flex-row">
				<text>当前可用余额</text>
				<text>{{ money }}</text>
			</view>
			<view class="rate">提现费率：{{ tx_rate }} （单笔提现最低手续费：{{ service_charge }}元）</view>
		</view>
		<view class="main">
			<view class="title">输入金额（元）</view>
			<view class="input">
				<input type="number" v-model="withdrawal_money" @input="inputWithdrawalMoney()" placeholder="请输入提现金额"/>
			</view>
			<view class="tip flex-row">
				<text v-if="showRealMoney">实际到账金额：{{ real_money }}元 </text>
				<text v-else style="color: red;">{{ tip }}</text>
				<text @click="withdrawalAll">全部提现</text>
			</view>
			<view class="notice">温馨提示：
				<view>1.请准确填写提现金额，因信息错误导致的资金损失，我们将不承担任务责任；</view>
				<view>2.到账时间次日24点以前，具体到账时间以实际到账为准。</view>
			</view>
			<view class="btn" @click="submitWithdraw">确认提现</view>
		</view>
		<uni-loading ref="loading"></uni-loading>
	</view>
</template>

<script>
export default{
	data(){
		return {
			userInfo: uni.getStorageSync('userInfo'),
			bank: {
				bank_no: '',
				bank_name: '',
				bank_kaihu: ''
			},
			money: 1000,
			tx_rate: 0,
			real_money: 0,
			tx_min_money: 0,
			withdrawal_money: 0,
			showPayPassword: false,
			isShowPayPassword: false,
			payPassword: '',
			showRealMoney: true,
			service_charge: 0,
			tip: '输入金额超过可提现余额',
			isLoaded: false
		}
	},
	onLoad(){
	},
	onReady(){
		this.$refs.loading.open();
		setTimeout(()=>{
			this.$refs.loading.close();
		}, 3000);
	},
	methods: {
		// 全部提现
		withdrawalAll(){
			this.withdrawal_money = this.money;
			this.inputWithdrawalMoney();
		},
		// 记录金额
		inputWithdrawalMoney(){
			if(!this.withdrawal_money || this.withdrawal_money == 0){
				this.withdrawal_money = '';
				return;
			}
			setTimeout(()=>{
				// 判断当前金额是否大于最大金额
				this.money = Number.parseFloat(this.money || 0);
				if(this.withdrawal_money == 0){
					this.withdrawal_money = '';
					return;
				}
				this.withdrawal_money = Number.parseFloat(this.withdrawal_money);
				if(this.withdrawal_money > this.money){
					this.showRealMoney = false;
				}else{
					this.showRealMoney = true;
					if(this.withdrawal_money < this.tx_min_money){
						this.showRealMoney = false;
						this.tip = `单笔提现最低金额为${this.tx_min_money}元`;
					}else{
						this.tip = '输入金额超过可提现余额';
					}
				}
				this.countRealMoney();
			}, 50);
		},
		// 计算实际到账金额
		countRealMoney(){
			// 这里需要动态计算当前提现金额对应的手续费是否小于最低手续费
			let serviceCharge = this.withdrawal_money * this.tx_rate * 0.01;
			if(serviceCharge < this.service_charge){
				serviceCharge = this.service_charge;
			}
			this.real_money = Number.parseFloat(this.withdrawal_money - serviceCharge).toFixed(2);
		},
		// 密码校验通过
		finishPayPassword(password){
			let _this = this;
			uni.request({
				method: 'POST',
				url: this.baseURL + '/Api/withdrawAction',
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				data: {
					userid: this.userInfo.id,
					price: this.withdrawal_money,
					pay_password: password,
					tx_rate: this.tx_rate
				},
				success: (res)=>{
					showToast(res.data.info);
					if(res.data.status > 0){
						_this.showPayPassword = false;
						_this.getUserInfo();
					}
				}
			})
		},
		// 确认提现
		submitWithdraw(){
			let _this = this;
			if(!_this.isLoaded) return;
			_this.isShowPayPassword = true;
			uni.request({
				method: 'POST',
				url: this.baseURL + '/Api/checkWithdraw',
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				data: {
					userid: this.userInfo.id,
					price: this.withdrawal_money,
					tx_rate: this.tx_rate
				},
				success: (res)=>{
					if(res.data.status == 0){
						return showToast(res.data.info);
					}
					_this.showPayPassword = true;
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	background: #ededed;
	padding: 20upx 30upx;
	box-sizing: border-box;
	overflow: hidden;
}

/*主容器*/
.main{
	padding: 50upx 30upx 0;
	background: #fff;
	border-radius: 10upx;
	box-sizing: border-box;
	overflow-y: auto;
}
.main .title{
	font-size: 30upx;
	font-weight: bold;
}
.main .input{
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	border-bottom: 2upx solid #eee;
}
.main .input input{
	width: 100%;
	height: 100%;
}
.main .input text{
	color: #666;
	font-size: 28upx;
}
.main .input.flex-row{
	margin-top: 20upx;
}
.main .input.flex-row input{
	width: calc(100% - 130upx);
}
.main .tip{
	color: ;
	font-size: 24upx;
	margin: 20upx 0 30upx;
}
.main .notice{
	color: #666;
	margin: 30upx 0;
	font-size: 26upx;
}
.main .btn{
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	color: #fff;
	border-radius: 10upx;
	background: linear-gradient(to right, #7160FC, #8B64FE);
}

/*余额*/
.balance{
	color: #fff;
	height: 150upx;
	overflow: hidden;
	padding: 10upx 30upx;
	border-radius: 10upx;
	background: linear-gradient(to right, #7160FC, #8B64FE);
}
.balance view:first-child{
	height: 80upx;
	line-height: 80upx;
}
.balance text:first-child{
	font-size: 28upx;
}
.balance text:last-child{
	font-size: 48upx;
}
.balance .rate{
	font-size: 26upx;
	padding-top: 20upx;
	border-top: 2upx solid #ddd;
}


</style>
